<%@ page language="java" pageEncoding="UTF-8"%>

<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %>
<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>
<%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic" %>
<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %> 
<html> 
	<head>
		<title>宠物宝贝儿</title>
		<link rel="stylesheet" type="text/css" href="styles.css">
		
		<link rel="Shortcut Icon" href="favicon.ico"><!-- 浏览器标签上显示的图标	-->
		
		<!-- 判断访客是否登录了,没有返回主页 	-->
	<% 
	
		if(pageContext.getSession().getAttribute("petpo")==null){
		response.sendRedirect("index.jsp");
		return;
		}
	%>


<style type="text/css">

	#link a:link { text-decoration:none;color:#00bbff}  
　　 #link a:active { text-decoration:none;color:#00bbff}  
	#link a:hover {color:#ff88ff}  
　　 #link a:visited { text-decoration: none;color:#00bbff}  

	#operate a:link { color:#ff88ff}  
　　 #operate a:active { color:#ff88ff}  
	#operate a:hover {color:#00bbff}  
　　 #operate a:visited { text-decoration: none;color:#afc4de}

	table{ table-layout:fixed }   /*这个设定表格宽度固定，不随内容变化 */
	table tr {font-size: x-small;}
	.collapsed {display:none;}

</style>


	
<script type="text/javascript">
<!-- 
//此为浮动层代码	
var currentMoveObj = null;    //当前拖动对象
var relLeft;    //鼠标按下位置相对对象位置
var relTop;
function f_mdown(obj)
{
    currentMoveObj = obj;        //当对象被按下时，记录该对象
    currentMoveObj.style.position = "absolute";
    relLeft = event.x - currentMoveObj.style.pixelLeft;
    relTop = event.y - currentMoveObj.style.pixelTop;
}
window.document.onmouseup = function()
{
    currentMoveObj = null;    //当鼠标释放时同时释放拖动对象
}
function f_move(obj)
{
    if(currentMoveObj != null)
    {
        currentMoveObj.style.pixelLeft=event.x-relLeft;
        currentMoveObj.style.pixelTop=event.y-relTop;
    }
}
// ------------end



//使用ajax
		var xmlHttp;
		function createHttpRequest(){
	       if (window.ActiveXObject) {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            } 
            else if (window.XMLHttpRequest) {
                xmlHttp = new XMLHttpRequest();                
            }
		
		}
		
		function send(){
			//创建XMLHttpRequest对象
			createHttpRequest();
			
				//发起请求
			var date = document.getElementById("name");
	         var url = "../valid?name=" + date.value;
	         xmlHttp.onreadystatechange = callback;
	         xmlHttp.open("GET", url, true);   
	         xmlHttp.send(null);
		}
		
		//回调函数
		function callback(){
			if(xmlHttp.readyState==4){
				var s = xmlHttp.responseText;
				document.getElementById("userNameErrorDiv").innerHTML=s;
			}
		}
		
       
       
function dofeed(){
  alert("我还想吃，主人");
    alert("力量+30");
}


function dotellstory(){
  alert("主人讲的故事真好听。");
    alert("聪明+1，爱心+3，力量-5");
}


function doplay(){
  alert("没人陪我耍啊！");
    alert("聪明+3，爱心+1，力量-5");
}

function DoMenu(emid)         //此为主要的菜单开闭方法
{
 var obj = document.getElementById(emid); 
 obj.className = (obj.className.toLowerCase() == "expanded"?"collapsed":"expanded");       //collapsed在css中 写上display：none
 if((LastLeftID!="")&&(emid!=LastLeftID)) //关闭上一个Menu
 {
  document.getElementById(LastLeftID).className = "collapsed";
 }
 LastLeftID = emid;
}


function openAll(){

}

function closeAll(){

}



//隐藏floater
function hidden(){
document.getElementById("floater").style.visibility="hidden";
document.getElementById("pic").src=document.getElementById("pic").src;


}

 -->
</script>		
		
	</head>
	<body>


	<p><img src="img\backdrop.gif"/></p>
	<div style="float:left"><a href="index.jsp">首页</a>| <a href="foster.jsp">apply for your own pet </a></div>
	<div style="float: right;"><a href="goqueryinfo.do">| 宠物信息查询</a></div>
	
	<p>&nbsp;</p>
	<DIV id=tabline>&nbsp;</DIV>
		<div>
			<div id="m_blog" style="margin-left: 80px">
				<div style="width: 25%; float: left; margin-right: 40px">
					<div class="line">
						<div class="more">
							宠物id:<bean:write property="id" name="petpo"/>
							<a href="gomodify.do"><img src="img\edit.jpg" />编辑宠物信息</a>
						</div>
												
						<marquee direction="left" bgcolor="pink">这儿加入时间</marquee>
					</div>
					<div class="date">
						<bean:write property="intro" name="petpo"/>
						<br>
						我的主人是<bean:write property="hostName" name="petpo"/>
						

					</div>
					<div class="cnt">
						<table>
						<tr><td style="color:#00bbff; padding-right:50px">
						<p>
							力量:<bean:write property="power" name="petpo"/>
						</p>
						<p>
							智力:<bean:write property="ability" name="petpo"/>
						</p>
						<p>
							爱心:<bean:write property="love" name="petpo"/>
						</p></td>	
						</tr>
						</table>
						<div id="moveableimg" style="position:absolute;left:240;top:280" onmousedown="f_mdown(this)" onmousemove="f_move(this)">
						<input type="button" value=拖我>
						<img id="pic" src="<bean:write property="type" name="petpo"/>" alt="Here is the pet's image."/><br><br>
						</div>

							
	
					</div>

					<div>
						<p>
							<html:submit property="feed" onclick="dofeed()">喂食</html:submit>
							<html:submit property="tellStory" onclick="dotellstory()">讲故事</html:submit>
							<html:submit property="playGame" onclick="doplay()">玩游戏</html:submit>
						</p>

		<button onclick=document.forms[0].reset();document.getElementById("floater").style.visibility="visible";return false;>写宠物日记</button>


					</div>
				</div>
				<DIV id="cals" style="width: 56%; float: left;">
					<br>
					<div class="line">
						宠物日记
					</div>
					<br>
					<table id="pettable"	 border="1px" bordercolor="#00bbff">
						<tr>
							<th style="width:80px;">
								日期
							</th>
							<th>
								标题
							</th>
							<th style="width:50px;">
								天气
							</th>
						</tr>
						<tr><td></td><td style="border: none;padding-left:20px;padding-right:20px"><logic:empty name="diaryset">!你还没有保存过日记哟</logic:empty></td><td></td></tr>
						<logic:notEmpty name="diaryset">
						<%int i=1; %>
							<logic:iterate offset="0" length="20" id="diary" name="diaryset">
						<%int j=i++;%>	
								<tr style="color: #00bbff;"><td style="width:80px"><bean:write property="date" name="diary"/></td> <td><span id="link">&nbsp;&nbsp;<a href="javascript:void()" onclick=DoMenu("hide<%=j%>")><bean:write property="title" name="diary"/></a></span>
								
								<span id="operate" style="font-size: xx-small; "><a href="#">〖编辑〗</a>&nbsp;<a href="#">〖Ⅹ〗</a></span></td> <td style="width:40px"> &nbsp;<bean:write property="weather" name="diary"/></td> </tr>
								<tr id="hide<%=j %>" class="collapsed"><td colspan="3" style="color: #0066ff;border: none;padding-left:20px;padding-right:20px">&nbsp;&nbsp;&nbsp;&nbsp;<bean:write property="content" filter="false" name="diary"/> </td></tr>
							</logic:iterate>
						</logic:notEmpty>	
					</table>
				</DIV>
			</div>
	</div>
		<div id="floater" style="position:absolute;visibility:hidden;left:480px;top:180px; BACKGROUND:#aaeeff; height:250px; width:400px;border:outset;font: xx-small;">
					<div style="BACKGROUND: #00ccff; HEIGHT: 23px; width :400px;"><div style="float:left"><b>心情日记</b></div><a href=javascript:hidden()><img style="float:right" src="img\close.gif" /></a></div>
					 		<html:form action="diary.do" style="margin-left:30px;margin-bottom:10px;margin-top:10px">
					
									标题：
									<html:text property="title"  maxlength="50"/>
									天气：
									<html:text property="weather" maxlength="20"/>
									<br>正文：<br>
									<span><html:textarea property="content" rows="10" cols="63"></html:textarea></span>
									<html:submit value="记录日记"/>
									
								</html:form>
					 	
			</div> 
			
<script type="text/javascript">
<!-- //这是实现floater层浮动的代码，实现凡是点input框中的内容不会被拖动。
		//之所以要放在后边，是因为代码中最后有个new divDrag("floater") 需要floater层在其前边
var $=function(id){return document.getElementById(id)};
Array.prototype.extend=function(C){for(var B=0,A=C.length;B<A;B++){this.push(C[B]);}return this;}
function divDrag(){
                var A,B;
        var zIndex=1;
        this.dragStart=function(e){
                e=e||window.event;
                if((e.which&&(e.which!=1))||(e.button&&(e.button!=1)))return;
                var pos=this.$pos;
                                if(document.defaultView){
                                        _top=document.defaultView.getComputedStyle(this,null).getPropertyValue("top");
                                        _left=document.defaultView.getComputedStyle(this,null).getPropertyValue("left");}
                                else{
                                        if(this.currentStyle){_top=this.currentStyle["top"];_left=this.currentStyle["left"];}
                                }
                pos.ox=(e.pageX||(e.clientX+document.documentElement.scrollLeft))-parseInt(_left);
                pos.oy=(e.pageY||(e.clientY+document.documentElement.scrollTop))-parseInt(_top);
                                if(!!A){
                                         if(document.removeEventListener){
                        document.removeEventListener("mousemove",A,false);
                        document.removeEventListener("mouseup",B,false);
                                        }else{
                        document.detachEvent("onmousemove",A);
                        document.detachEvent("onmouseup",B);
                                                document.detachEvent("ondragstart",G);
                        }
                                }
                                A=this.dragMove.create(this);
                B=this.dragEnd.create(this);
                if(document.addEventListener){
                                        document.addEventListener("mousemove",A,false);
                    document.addEventListener("mouseup",B,false);
                }else{
                                        document.attachEvent("onmousemove",A);
                    document.attachEvent("onmouseup",B);
                                                G=function(){return false};
                                                document.attachEvent("ondragstart",G);
                }
                this.style.zIndex=(++zIndex);
                this.stop(e);
        }
        this.dragMove=function(e){
                                e=e||window.event;
                                var pos=this.$pos;
                this.style.top=(e.pageY||(e.clientY+document.documentElement.scrollTop))-parseInt(pos.oy)+'px';
                this.style.left=(e.pageX||(e.clientX+document.documentElement.scrollLeft))-parseInt(pos.ox)+'px';
                                this.stop(e);}
        this.dragEnd=function(e){
                var pos=this.$pos;              
                e=e||window.event;
                                
                                if((e.which&&(e.which!=1))||(e.button&&(e.button!=1)))return;
                if(document.removeEventListener){
                        document.removeEventListener("mousemove",A,false);
                        document.removeEventListener("mouseup",B,false);
                                }else{
                        document.detachEvent("onmousemove",A);
                        document.detachEvent("onmouseup",B);
                                                document.detachEvent("ondragstart",G);
                }
                                A=null;
                                B=null;
                this.style.zIndex=(++zIndex);
                this.stop(e);
        }
        this.position=function (e){ 
                var t=e.offsetTop;
                var l=e.offsetLeft;
                while(e=e.offsetParent){ 
                                t+=e.offsetTop; 
                                l+=e.offsetLeft; 
                }
                return {x:l,y:t,ox:0,oy:0}
        }
        this.stop=function(e){
                if(e.stopPropagation){
                        e.stopPropagation();
                }else{
                        e.cancelBubble=true;}
                        
                if(e.preventDefault){
                        e.preventDefault();}
                else{e.returnValue=false;}
        }
                this.stop1=function(e){
                        e=e||window.event;
                if(e.stopPropagation){
                        e.stopPropagation();
                }else{
                        e.cancelBubble=true;}

        }
        this.create=function(bind){
                var B=this;
                var A=bind;
                return function(e){
                        return B.apply(A,[e]);
                }
        }
        this.dragStart.create=this.create;
        this.dragMove.create=this.create;
        this.dragEnd.create=this.create;
        
        this.initialize=function(){
                for(var A=0,B=arguments.length;A<B;A++){
                        C=arguments[A];
                        C=(typeof(C)=='object')?C:(typeof(C)=='string'?$(C):null);
                        if(!C)continue;
                        C.$pos=this.position(C);
                        C.dragMove=this.dragMove;
                        C.dragEnd=this.dragEnd;
                        C.position=this.position;
                        C.stop=this.stop;
                                                var $A=[];
                                                $A=$A.extend(C.getElementsByTagName('span')||[]).extend(C.getElementsByTagName('input')||[]);
                                                for(var D=0,E=$A.length;D<E;D++){
                                                        if(C.addEventListener){
                                $A[D].addEventListener("mousedown",this.stop1,false);
                                                                $A[D].addEventListener("mousemove",this.stop1,false);
                                        }else{
                                $A[D].attachEvent("onmousedown",this.stop1);
                                                                $A[D].attachEvent("onmousemove",this.stop1);
                                }
                                                }
                        if(C.addEventListener){
                                C.addEventListener("mousedown",this.dragStart.create(C),false);
                        }else{
                                C.attachEvent("onmousedown",this.dragStart.create(C));
                        }
                }

        }
        this.initialize.apply(this,arguments);
        
}
//生成拖动层很简单
new divDrag("floater");
-->
</script>
	
	</body>
</html>